<!--------------------------------
 - @Author: Ronnie Zhang
 - @LastEditor: Ronnie Zhang
 - @LastEditTime: 2023/12/05 21:29:43
 - @Email: zclzone@outlook.com
 - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
 --------------------------------->

<template>
  <CommonPage back>
    <template #title-suffix>
      <NTag class="ml-12" type="warning">
        {{ route.query.memberName }}
      </NTag>
    </template>

    <n-tabs type="line" animated default-value="memberInfo" @update:value="onUpdateTabs">
      <!-- 会员信息 -->
      <n-tab-pane name="memberInfo" tab="会员信息">
        <n-descriptions label-placement="left" bordered>
          <n-descriptions-item label="姓名:" span="2">
            {{ memberModel.name }}
          </n-descriptions-item>
          <n-descriptions-item label="余额:" span="2">
            {{ memberModel.balance }}
          </n-descriptions-item>
          <n-descriptions-item label="手机号:" span="2">
            {{ memberModel.mobile }}
          </n-descriptions-item>
          <n-descriptions-item label="性别:" span="2">
            {{ memberModel.sex }}
          </n-descriptions-item>
          <n-descriptions-item label="生日:" span="2">
            {{ memberModel.birthDate }}
          </n-descriptions-item>
          <n-descriptions-item label="可用积分:" span="2">
            {{ memberModel.availableScore }}
          </n-descriptions-item>
        </n-descriptions>
      </n-tab-pane>
      <!-- 订单信息 -->
      <n-tab-pane name="memberOrderInfo" tab="订单信息">
        <n-data-table
          remote="true" :page-slot="7" :columns="columnsOrderInfo" :data="dataOrderInfo"
          :pagination="paginationOrderInfo" @update:page="onPageChangeOrderInfo"
        />
      </n-tab-pane>
      <!-- 余额信息 -->
      <n-tab-pane name="memberBalanceInfo" tab="余额信息">
        <n-data-table :columns="columnsBalanceInfo" :data="dataBalanceInfo" :bordered="true" :single-line="false" />
      </n-tab-pane>
      <!-- 积分信息 -->
      <n-tab-pane name="memberScoreInfo" tab="积分信息">
        <n-data-table :columns="columnsScoreInfo" :data="dataScoreInfo" :bordered="true" :single-line="false" />
      </n-tab-pane>
    </n-tabs>
  </CommonPage>
</template>

<script setup>
import { request } from '@/utils'
import { NAvatar, NTag } from 'naive-ui'

defineOptions({ name: 'MemberDetails' })
const route = useRoute()
const memberId = route.query.memberId
const memberModel = ref({})
onMounted(() => {
  // eslint-disable-next-line no-console
  console.info(route.query.memberName)
  request
    .get(`/system/member/${memberId}`)
    .then((res) => {
      memberModel.value = res
    })
})
// --------------------------余额变化----------------------------------
const dataBalanceInfo = ref([])
const columnsBalanceInfo = [

  { title: '变动类型', key: 'changeEnumName', width: 100 },
  { title: '变动金额', key: 'moneyChange', width: 90 },
  { title: '变动后可用', key: 'availableBalance', width: 100 },
  { title: '备注', key: 'remark', width: 100 },
  { title: '变动日期', key: 'createTime', width: 100 },
]
// --------------------------积分变化----------------------------------
const dataScoreInfo = ref([])
const columnsScoreInfo = [
  { title: '变动日期', key: 'createTime', width: 100 },
  { title: '变动类型', key: 'sourceType', width: 100 },
  { title: '变动数量', key: 'scoreChange', width: 90 },
  { title: '变动后可用', key: 'availableScore', width: 100 },
  { title: '备注', key: 'remark', width: 100 },
  { title: '变动日期', key: 'createTime', width: 100 },
]
function onUpdateTabs(_tabPaneName) {
  if (_tabPaneName === 'memberOrderInfo') {
    getDataOrderInfo()
  }
  else if (_tabPaneName === 'memberBalanceInfo') {
    request
      .post(`/system//member/balance/card/${memberId}`, {})
      .then((res) => {
        dataBalanceInfo.value = res
      })
  }
  else if (_tabPaneName === 'memberScoreInfo') {
    request
      .post(`/system//member/score/card/${memberId}`, {})
      .then((res) => {
        dataScoreInfo.value = res
      })
  }
}
// --------------------------订单信息----------------------------------
const dataOrderInfo = ref([])
const paginationOrderInfo = ref({
  prefix({ itemCount }) {
    return `共 ${itemCount} 条数据`
  },
})
// ---------------------------订单列表-----------------------------------------
const columnsOrderInfo = [
  { title: '订单号', key: 'orderNum', width: 100 },
  { title: '客户名称', key: 'userName', width: 90 },
  {
    title: '订单原价',
    key: 'originalMoney',
    width: 100,
  },
  {
    title: '优惠价格',
    key: 'originalMoney',
    width: 100,
  },
  {
    title: '应收价格',
    key: 'receivableMoney',
    width: 100,
  },
  { title: '运费', key: 'deliveryMoney', width: 90 },
  { title: '订单日期', key: 'orderDate', width: 100 },
  {
    title: '商品图片',
    key: 'goodsPics',
    width: 80,
    render: ({ items }) => {
      if (items?.length) {
        return items.map(item2 =>
          h(NAvatar, {
            size: 'medium',
            src: item2.goods.goodsPics,
          }),
        )
      }
      return '暂无标签'
    },
  },
]
function getDataOrderInfo(page = { pageNo: 1 }) {
  const param = { ...page, memberCardId: memberId }
  const pageOld = paginationOrderInfo.value
  request
    .post('/system/order/page', param)
    .then((res) => {
      dataOrderInfo.value = res.records
      pageOld.page = res.current
      pageOld.itemCount = res.total
      paginationOrderInfo.value = pageOld
    })
}

function onPageChangeOrderInfo(_pageNum) {
  getDataOrderInfo({ pageNo: _pageNum })
}
</script>
